import { Outlet, Link, useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Video, Database } from "lucide-react";
import UserAvatar from "./UserAvatar";

const Layout = () => {
  const location = useLocation();

  const isActive = (path: string) => location.pathname === path;

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center space-x-2">
            <Video className="h-8 w-8 text-primary" />
            <h1 className="text-xl font-bold bg-[var(--gradient-primary)] bg-clip-text text-transparent">
              视频分析平台
            </h1>
          </div>

          <nav className="flex items-center space-x-2">
            <Button
              variant={isActive("/") ? "hero" : "ghost"}
              asChild
              className="transition-all duration-300"
            >
              <Link to="/">
                <Video className="h-4 w-4 mr-2" />
                视频录入
              </Link>
            </Button>
            <Button
              variant={isActive("/library") ? "hero" : "ghost"}
              asChild
              className="transition-all duration-300"
            >
              <Link to="/library">
                <Database className="h-4 w-4 mr-2" />
                视频库
              </Link>
            </Button>
            <UserAvatar />
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="min-h-[calc(100vh-4rem)]">
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;
